<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3，添加，移除，切换的元素类名操作
		 
		 addClass()           有参 1个惨和多个参
		                      语法：addClass("类名");
							  <p class="类名">
							  语法：addClass("类名1 类名2");
							  功能：匹配元素集合中的所有元素
							  添加一个或者多个类名操作
							  理解：元素添加存在的样式
		 
		 removeClass()          功能：匹配元素集合中的所有元素
							  移除一个或者多个类名操作
		
		 toggleClass()          功能:如果元素有类名移除，没有则添加
		 
		 hasClass()             检查匹配元素集合中是否包含指定类名返回值boolean
		 
		 -->
		 <!-- 
		    html      div id targetElement
			          四个按钮 id: addClassBtn removeClassBtn  toggleClassBtn  hasClassBtn
			          div id resultArea
			
			css： 300*300 背景色随意
				  border{10px 实线 红色边框 倒角画圆}
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgClocr{
				background: #eaaeaa;
				width: 300px;
				height: 300px;
			}
			.borders{
				border: 10px solid red;
				border-radius: 50%;
			}
			button{
				width: 170px;
				height: 50px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加按钮</button>
		<button id="removeClassBtn">移除按钮</button>
		<button id="toggleClassBtn">切换按钮</button>
		<button id="hasClassBtn">检查元素是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1. 点击 添加类名 按钮 添加效果【样式】 300*300 背景色红色
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgClocr borders");
				$("#resultArea").html("添加样式类名 bgClor");
			});
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("borders");
			});
			//4.点击 切换类名 按钮 添加效果
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("borders");
			});
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgClocr");
			});
			//6.检查类名是否存在  true存在  false不存在
			$("#hasClassBtn").click(function(){
			var borders=$("#targetElement").hasClass("borders");
				$("#resultArea").html("元素borders是否存在："+borders);
			});
		</script>
	</body>
</html>